<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>服务器监控</title>
    <link rel="stylesheet" href="./css/layui.css" media="all"/>
</head>
<style type="text/css">
    h5 {
        margin-top: 20px;
    }
</style>

<body>
<div class="layui-container" id="text">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md4">
            <h5>CPU</h5>
            <div class="grid-demo grid-demo-bg1">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>核心数</td>
                        <td>{{cpuNum}}</td>
                    </tr>
                    <tr>
                        <td>总量</td>
                        <td>{{cpuTotal}}</td>
                    </tr>
                    <tr>
                        <td>用户使用率</td>
                        <td>{{cpuUsed}}%</td>
                    </tr>
                    <tr>
                        <td>系统使用率</td>
                        <td>{{cpuSys}}%</td>
                    </tr>
                    <tr>
                        <td>当前空闲率</td>
                        <td>{{cpuFree}}%</td>
                    </tr>
                    <tr>
                        <td>当前等待率</td>
                        <td>{{cpuWait}}%</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-col-md4">
            <h5>内存</h5>
            <div class="grid-demo">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>内存</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>总内存</td>
                        <td>{{ncTotal}}GB</td>
                    </tr>
                    <tr>
                        <td>已用内存</td>
                        <td>{{ncUsed}}GB</td>
                    </tr>
                    <tr>
                        <td>剩余内存</td>
                        <td>{{ncFree}}GB</td>
                    </tr>
                    <tr>
                        <td>使用率</td>
                        <td>{{ncUsage}}%</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1">
                <h5>JVM</h5>
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>JVM</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>总内存</td>
                        <td>{{jvmTotal}}M</td>
                    </tr>
                    <tr>
                        <td>已用内存</td>
                        <td>{{jvmUsed}}M</td>
                    </tr>
                    <tr>
                        <td>空闲内存</td>
                        <td>{{jvmFree}}M</td>
                    </tr>
                    <tr>
                        <td>使用率</td>
                        <td>{{jvmUsage}}%</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-md12">
            <div class="grid-demo grid-demo-bg2">
                <h5>服务器信息</h5>
                <div class="grid-demo">
                    <table class="layui-table" id="systeminfo">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <tbody>
                        <td>服务器名称：</td>
                        <td>{{computerName}}</td>
                        <td>操作系统：</td>
                        <td>{{osName}}</td>
                        </tbody>
                        <tbody>
                        <td>服务器IP：</td>
                        <td>{{computerIp}}</td>
                        <td>系统架构：</td>
                        <td>{{osArch}}</td>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-md12">
            <div class="grid-demo grid-demo-bg2">
                <h5>Java虚拟机信息</h5>
                <div class="grid-demo">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <tbody id="java">
                        <tr>
                            <td>Java名称</td>
                            <td>{{name}}</td>
                            <td>Java版本</td>
                            <td>{{version}}</td>
                        </tr>
                        <tr>
                            <td>启动时间</td>
                            <td>{{startTime}}</td>
                            <td>运行时长</td>
                            <td>{{runTime}}</td>
                        </tr>
                        <tr>
                            <td colspan="1">安装路径</td>
                            <td colspan="3">{{home}}</td>
                        </tr>
                        <tr>
                            <td colspan="1">项目路径</td>
                            <td colspan="3">{{userDir}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-md12">
            <div class="grid-demo grid-demo-bg2">
                <h5>磁盘状态</h5>
                <div class="grid-demo">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>盘符路径</th>
                            <th>文件系统</th>
                            <th>盘符类型</th>
                            <th>总大小</th>
                            <th>可用大小</th>
                            <th>已用大小</th>
                            <th>已用百分比</th>
                        </tr>
                        </thead>
                        <tbody id="cp">
                        <tr v-for="cp in cps">
                            <td>{{cp.dirName}}</td>
                            <td>{{cp.sysTypeName}}</td>
                            <td>{{cp.typeName}}</td>
                            <td>{{cp.total}} GB</td>
                            <td>{{cp.free}} GB</td>
                            <td>{{cp.usage}} GB</td>
                            <td>{{cp.usage}}%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</html>
